import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yysk_app/model/collection_model/home_first_list_model.dart';
import 'package:yysk_app/pages/nft_pages/home_pages/collection_detail/collection_detail_page.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';

class CollectionItemWidget extends StatelessWidget {
  final HomeFirstListItem item;
  const CollectionItemWidget({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(
          '${CollectionDetailPage.path}?id=${item.id}',
          arguments: {'id': item.id},
        );
      },
      child: Container(
        width: context.width,
        margin: const EdgeInsets.only(bottom: 12),
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(),
        child: Stack(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Stack(
                  children: [
                    Column(
                      children: [
                        Container(
                          width: 347.px,
                          height: 373.px,
                          clipBehavior: Clip.antiAlias,
                          decoration: BoxDecoration(
                            // color: AppColors.startColor,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(8.px),
                              topRight: Radius.circular(8.px),
                            ),
                          ),
                          child: LazyImage(
                            width: 347.px,
                            height: 347.px,
                            imageUrl: '${item.coverImageUrl}',
                            borderRadius: 0,
                          ),
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Center(
                              child: Container(
                                width: 350.px,
                                clipBehavior: Clip.antiAlias,
                                padding: EdgeInsets.fromLTRB(
                                  14.px,
                                  14.px,
                                  14.px,
                                  14.px,
                                ),
                                decoration: BoxDecoration(
                                  color: AppColors.backgroundColorGrey2,
                                  borderRadius: BorderRadius.only(
                                    bottomLeft: Radius.circular(8.px),
                                    bottomRight: Radius.circular(8.px),
                                  ),
                                ),

                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      '${item.productName}',
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        color: AppColors.fontColor,

                                        fontSize: 18.px,
                                      ),
                                    ),
                                    SizedBox(height: 6.px),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Container(
                                          height: 16.px,
                                          clipBehavior: Clip.antiAlias,
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(
                                              2.px,
                                            ),
                                            color: AppColors.startColor,
                                            border: Border.all(
                                              width: 1.px,
                                              color: AppColors.startColor,
                                            ),
                                          ),
                                          child: Row(
                                            children: [
                                              Container(
                                                padding: EdgeInsets.fromLTRB(
                                                  4.px,
                                                  0,
                                                  4.px,
                                                  0,
                                                ),
                                                decoration: BoxDecoration(
                                                  color: AppColors.startColor,
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                        2.px,
                                                      ),
                                                ),
                                                child: Center(
                                                  child: Text(
                                                    '限量',
                                                    style: TextStyle(
                                                      color:
                                                          AppColors
                                                              .fontColorBlack,
                                                      // fontFamily: 'CustomFont',
                                                      fontSize: 10.px,
                                                    ),
                                                  ),
                                                ),
                                              ),
                                              Container(
                                                padding: EdgeInsets.fromLTRB(
                                                  4.px,
                                                  0,
                                                  4.px,
                                                  0,
                                                ),
                                                decoration: BoxDecoration(
                                                  color:
                                                      AppColors
                                                          .backgroundColorGrey2,
                                                  borderRadius:
                                                      BorderRadius.only(
                                                        topRight:
                                                            Radius.circular(
                                                              2.px,
                                                            ),
                                                        bottomRight:
                                                            Radius.circular(
                                                              2.px,
                                                            ),
                                                      ),
                                                ),
                                                child: Center(
                                                  child: Text(
                                                    '${item.firstPublishCount}份',
                                                    style: TextStyle(
                                                      color:
                                                          AppColors.startColor,
                                                      // fontFamily: 'CustomFont',
                                                      fontSize: 10.px,
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),

                                        Text(''),
                                      ],
                                    ),
                                    SizedBox(height: 16.px),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Container(
                                              width: 20.px,
                                              height: 20.px,
                                              clipBehavior: Clip.antiAlias,
                                              decoration: BoxDecoration(
                                                border: Border.all(
                                                  width: 1.px,
                                                  color:
                                                      AppColors.backgroundColor,
                                                ),
                                                borderRadius:
                                                    BorderRadius.circular(100),
                                              ),
                                              child: Center(
                                                child: LazyImage(
                                                  width: 19.px,
                                                  height: 19.px,
                                                  borderRadius: 100,
                                                  imageUrl:
                                                      '${item.daoHeadImageUrl}',
                                                ),
                                              ),
                                            ),
                                            SizedBox(width: 6.px),
                                            SizedBox(
                                              width: 120.px,
                                              child: Text(
                                                '${item.daoName}',
                                                textAlign: TextAlign.left,
                                                overflow: TextOverflow.ellipsis,
                                                style: TextStyle(
                                                  color:
                                                      AppColors
                                                          .backgroundColorGrey,
                                                  // fontFamily: 'CustomFont',
                                                  fontSize: 12.px,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),

                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Text(
                                              '已售 ${item.showSoldCount}',
                                              style: TextStyle(
                                                color:
                                                    AppColors
                                                        .backgroundColorGrey,
                                                // fontFamily: 'CustomFont',
                                                fontSize: 12.px,
                                              ),
                                            ),
                                            SizedBox(width: 10.px),
                                            Text(
                                              '￥',
                                              style: TextStyle(
                                                color:
                                                    AppColors.fontColorStart00,
                                                // fontFamily: 'CustomFont',
                                                fontSize: 14.px,
                                              ),
                                            ),
                                            Text(
                                              '${item.firstPublishPrice}',
                                              textAlign: TextAlign.end,
                                              style: TextStyle(
                                                color:
                                                    AppColors.fontColorStart00,
                                                // fontFamily: 'CustomFont',
                                                fontSize: 20.px,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Positioned(
                      left: 24.px,
                      top: 10.px,
                      child: Stack(
                        children: [
                          // ImageAssetWidget(
                          //   imageUrl: 'static/images/home/red.png',
                          //   width: 160.px,
                          //   height: 27.px,
                          // ),
                          Container(
                            height: 20.px,
                            width: 160.px,
                            
                            decoration: BoxDecoration(
                              color: Color.fromRGBO(0, 0, 0, 0.4),
                              borderRadius: BorderRadius.circular(100),
                            ),
                            constraints: BoxConstraints(minWidth: 100.px),
                            padding: EdgeInsets.only(
                              // left: 12.px,
                              // right: 12.px,
                            ),

                            child: CarouselSlider(
                              options: CarouselOptions(
                                height: 20.px,
                                aspectRatio: 16 / 9,
                                viewportFraction: 1,
                                initialPage: 0,
                                enableInfiniteScroll: true,
                                reverse: false,
                                autoPlay: true,
                                autoPlayInterval: const Duration(seconds: 3),
                                autoPlayAnimationDuration: const Duration(
                                  milliseconds: 800,
                                ),
                                autoPlayCurve: Curves.easeInQuad,
                                enlargeCenterPage: true,
                                enlargeFactor: 0.3,
                                scrollDirection: Axis.vertical,
                              ),
                              items:
                                  item.carousel?.map((i) {
                                    return Builder(
                                      builder: (BuildContext context) {
                                        return Container(
                                          // width: 150.px,
                                          decoration: BoxDecoration(
                                            color: Color.fromRGBO(0, 0, 0, 0),
                                            borderRadius: BorderRadius.circular(
                                              100,
                                            ),
                                          ),
                                          margin: const EdgeInsets.symmetric(
                                            horizontal: 5.0,
                                          ),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            children: [
                                              SizedBox(width: 10.px),
                                              ImageAssetWidget(
                                                imageUrl:
                                                    'static/images/box/clock.png',
                                                width: 12.px,
                                                height: 12.px,
                                              ),
                                              SizedBox(width: 4.px),
                                              Center(
                                                child: Text(
                                                  i,
                                                  textAlign: TextAlign.left,
                                                  style: TextStyle(
                                                    fontSize: 10,
                                                    color: Color.fromRGBO(
                                                      155,
                                                      254,
                                                      26,
                                                      1,
                                                    ),
                                                    overflow:
                                                        TextOverflow.ellipsis,
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        );
                                      },
                                    );
                                  }).toList(),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 10.px),
              ],
            ),

            // Column(
            //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
            //   crossAxisAlignment: CrossAxisAlignment.end,
            //   children: [
            //     SizedBox(height: 293.px),
            //     Center(
            //       child: Container(
            //         width: 339.px,
            //         height: 99.px,
            //         clipBehavior: Clip.antiAlias,
            //         decoration: BoxDecoration(
            //           // color: AppColors.backgroundColorBlack.withOpacity(
            //           //   0.2,
            //           // ), // 半透明白色，用于减轻光晕
            //           borderRadius: BorderRadius.circular(18.px),
            //         ),
            //         child: ClipRect(
            //           child: BackdropFilter(
            //             filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
            //             child: Opacity(
            //               opacity: 1,
            //               child: Container(
            //                 width: 339.px,
            //                 height: 99.px,
            //                 color: AppColors.backgroundColorBlack.withOpacity(
            //                   0.2,
            //                 ),
            //                 constraints: BoxConstraints.expand(),
            //               ),
            //             ),
            //           ),
            //         ),
            //       ),
            //     ),
            //   ],
            // ),
          ],
        ),
      ),
    );
  }
}
